let page_no = 1;
$('load', () => {
    const options = {
        url: "http://localhost:8080/static/data/listData/goodListID.json",
        success: result => {
            // console.log(result);
            // console.log(result[0]);
            // getShopData(result);s
            // console.log(result.length);
            // initPagination(result, result.length)
            getShopData(result);
        }
    }

    $.ajax(options);

    function getShopData(data) {
        new pageManager(10, 53, function (page) {
            // console.log("当前选中第", page, "页")
            var pagelist = []
            //0-59 1
            //60-119 2
            //(2-1)*20  <2*60
            for (let i = (page - 1) * 40; i < page * 40; i++) {
                if (data[i] === undefined) {
                    break;
                }
                pagelist[i] = data[i]
            }
            renderData(pagelist);
            $('#sort_priceDown').on('click', () => {
                renderData(pagelist);
                sortArrDown(data);
                renderData(data);
                bindEventList(data);
                console.log(1);
            })
            $('#sort10').on('click', () => {
                let res = sortArr10(data);
                renderData(res);
                bindEventList(res);
                console.log(2);
            });
            $('#sort100').on('click', () => {
                let res = sortArr100(data);
                renderData(res);
                bindEventList(res);
                console.log(1000);
            });
            $('#sort200').on('click', () => {
                let res = sortArr200(data);
                renderData(res);
                bindEventList(res);
                console.log('1000~2000');
            });
            $('#sort_priceUpper').on('click', () => {
                sortArrUpper(data);
                renderData(data);
                bindEventList(data);
            });
            bindEventList(data);
        })
        // console.log(res);
    }

    function sortArr10(res) {
        let arr = new Array();
        for (let i in res){
            if(parseInt(res[i].price.split('¥')[1]) <= 1000){
                arr.push(res[i]);
            }
        }
        return arr;
    }
    function sortArr100(res) {
        let arr = new Array();
        for (let i in res){
            if(parseInt(res[i].price.split('¥')[1]) >= 1000 && parseInt(res[i].price.split('¥')[1]) <= 10000){
                arr.push(res[i]);
            }
        }
        return arr;
    }
    function sortArr200(res) {
        let arr = new Array();
        for (let i in res){
            if(parseInt(res[i].price.split('¥')[1]) >= 20000){
                arr.push(res[i]);
            }
        }
        return arr;
    }

    function sortArrDown(res) {
        let compare = function (obj1, obj2) {
            let val1 = parseInt(obj1.price.split('¥')[1]);
            let val2 = parseInt(obj2.price.split('¥')[1]);
            if (val1 < val2) {
                return 1;
            } else if (val1 > val2) {
                return -1;
            } else {
                return 0;
            }
        }
        res.sort(compare);
    }

    function sortArrUpper(res) {
        // console.log(res);
        let compare = function (obj1, obj2) {
            let val1 = parseInt(obj1.price.split('¥')[1]);
            let val2 = parseInt(obj2.price.split('¥')[1]);
            if (val1 < val2) {
                return -1;
            } else if (val1 > val2) {
                return 1;
            } else {
                return 0;
            }
        }
        res.sort(compare);
    }

    function renderData(data) {
        let res = data.map((item) => {
            return `<li class="fl">
                        <div class="bottpm_photo_img">
                            <img data-src="${item.src}" listid="${item.id}/>
                            <img id="yaofeng" listid="${item.id} data-src="//image8.wbiao.co/mall/9e77c428d1674b68b890b9ea1d719c1b.png"/>
                        </div>
                        <p class="price">
                            <span>${item.price}</span>
                            <del>${item.price + parseInt(Math.random() * 10000 + 1000)}</del>
                        </p>
                        <p class="text">${item.title}</p>
                        <div class="tags clearfix">
                            <p class="fl">${item.sale_tags}</p>
                            <p class="fl">${item.shop}</p>
                        </div>
                        <div class="commodity_cover clearfix">
                            <div class="fl add_collect">加入收藏</div>
                            <div class="fl add_cart" id="goShop" listid="${item.id}">加入购物车</div>
                        </div>
                    </li>`;
        }).join("");

        setTimeout(() => {
            $('#shopListItem').html(res);
            new lazyLoad("#shopListItem .fl .bottpm_photo_img img")
        }, 300)
    }

    function bindEventList(data) {
        $('#shopListItem').on('click', 'img', function () {
            const id = parseInt($(this).eq(0).attr('listid').split('\/')[0]);
            console.log(id);
            // console.log(data);
            for (let i in data) {
                if (data[i].id - 0 === id) {
                    console.log(data[i]);
                    let res = JSON.stringify(data[i]);
                    console.log(res)
                    localStorage.setItem('Detail' + data[i].id, res);
                    location.href = 'http://localhost:8080/dist/detail.html?id=' + id;
                    return true;
                }
            }
            throw 'id is Empty or Not Find!'
        })
    }

    // function initPagination(data, long) {
    //     new Pagination(long, {
    //         pagination: ".pagination",
    //         show_num: 25,
    //         callback: function cB(index) {
    //             page_no = index + 1;
    //             // cB.then();
    //             getShopData(data)
    //         },
    //     });
    // }
});